<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>个人信息</title>
<link rel="stylesheet" th:href="@{/admin/css/user.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <h2>个人设置</h2>
                    <el-row :gutter="200">
                        <el-col :xs="24" :sm="12" :lg="12" :span="12" style="padding-bottom: 20px;">
                            <el-card class="card-category">
                                <div slot="header">
                                    <span>个人信息</span>
                                </div>
                                <el-form label-width="80px" :model="user" ref="user">
                                    <el-form-item required prop="username" :rules="[{ required: true, message: '请输入用户账号'}]" label="账号">
                                        <el-input placeholder="账号" v-model="user.username"></el-input>
                                    </el-form-item>
                                    <el-form-item required prop="introduce" :rules="[{ required: true, message: '请输入用户昵称'}]" label="介绍">
                                        <el-input placeholder="介绍" v-model="user.introduce"></el-input>
                                    </el-form-item>
                                    <el-form-item required prop="remark" :rules="[{ required: true, message: '请输入用户邮箱'}]" label="备注">
                                        <el-input placeholder="备注" v-model="user.remark"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="avatar" v-model="user.avatar" label="头像">
                                        <div class="avatar-uploader">
                                            <div @click="handleEditAvatar" class="el-upload">
                                                <img v-if="user.avatar" :src="user.avatar" class="avatar" width="200" height="200">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="save" style="float:right;">保存信息</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="12" :span="12">
                            <el-card class="card-tags">
                                <div slot="header">
                                    <span>修改密码</span>
                                </div>
                                <el-form label-width="100px" ref="pass" :model="pass">
                                    <el-form-item required prop="password" :rules="[{ required: true, message: '请输入新密码'}]" label="输入新密码">
                                        <el-input placeholder="请输入新密码,密码长度在6位及以上" v-model="pass.password" type="password"></el-input>
                                    </el-form-item>
                                    <el-form-item required prop="repassword" :rules="[{ required: true, message: '确认新密码'}]" label="确认新密码">
                                        <el-input placeholder="确认新密码" v-model="pass.repassword" type="password"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="danger" @click="changePassword" style="float:right;">修改密码</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-main>
        </el-container>
    </div>
    <el-dialog title="更换头像" :visible.sync="avatarDialog" width="40%" :before-close="handleClose" :close-on-press-escape="false" :close-on-click-modal="false">
        <div class="modal-body">
            <form>
                <div class="row default_avatars_list">
                    <img v-for="item in avatarList" :src="item.url" @click="changeAvatar(item.url)" title="点击更换！">
                </div>
            </form>
            <el-upload class="avatar-uploader"
                       :action="localUpload"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
                <img v-if="user.avatar" :src="user.avatar" class="avatar" height="200px">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div v-if="!user.avatar" class="el-upload__text">点我上传本地头像</div>
            </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="avatarDialog = false">取 消</el-button>
    </span>
    </el-dialog>
</div>
</body>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/admin/js/user.js}"></script>
</html>
